<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="书名"
          width="140">
      </el-table-column>
      <el-table-column
          prop="author"
          label="作者"
          width="120">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="editBook(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="getPage"
        :page-size="pageSize"
        :total="total">
<!--  el-pagination的属性：total是总条目数。page-size	每页显示条目个数。-->
    </el-pagination>
  </div>


</template>

<script>
export default {
  methods: {
    deleteBook(row) {
      console.log(row); //当前对象
      console.log(row.id); //当前对象
      //点击页面1的删除按钮，删除成功
      var that = this

      axios.delete('http://localhost:8181/book/deleteBook/'+ row.id).then( function (resp) {
        console.log(resp)
        if(resp.data === "sucess"){
          that.$message({
            showClose:true,
            duration: 0, //显示时间毫秒
            message:  row.id +'编号'+' - '+'《'+ row.name +'》'+'删除成功',
            type: 'info'
          })
          //因为本来就在这个页面，push跳转到自己的页面就不起作用似的。
          //删除成功后，希望刷新页面。--使用js代码动态刷新下
          // window.location.reload() //闪烁，体验不好
          // setTimeOut：防止跳转得太快，看不到过程。比如说3秒以后。
          setTimeout( () => {
            window.location.reload()
              },1000
          )


        }else {
          that.$message.error('出错了！');
        }

      })
      // this.$router.push({
      //   path: '/updateBook',
      //   query:{
      //     id: row.id
      //   }
      // })

    },
    editBook(row) {
      console.log(row); //当前对象
      console.log(row.id); //当前对象
      //点击页面1的修改按钮，跳转到页面2进行修改数据。页面2的数据填充好。
      this.$router.push({
        path: '/updateBook',
        query:{
          id: row.id
        }
      })
    },
    getPage(currentPage){ //点击后只是切换分页，currentPage参数是第几页，pageSize每页显示条目个数
      const that = this;
      axios.get('http://localhost:8181/book/findAll/'+currentPage+'/'+this.pageSize).then(
          function (resp) {
            // console.log(resp.data)
            that.tableData = resp.data.content //设置第？页数据
          },function (err) {
            console.log(err)
          }
      )

      // alert(currentPage)
    }
  },
  created() {
    //初始，实例创建完成后，页面就该展示数据了。
    const that = this;
    axios.get('http://localhost:8181/book/findAll/1/'+this.pageSize).then(
        function (resp) {
          // console.log(resp.data)
          that.tableData = resp.data.content //初始设置第一页数据
          that.total = resp.data.totalElements //初始设置总条目数
        },function (err) {
          console.log(err)
        }
    )

  },

  data() {
    return {
      totalPage: 0,
      total: 0, //总条目数
      pageSize: 5, //每页显示条目个数
      tableData: [{
        id: '1',
        name: '《java开发》',
        author: '张三',
      }]
    }
  }
}
</script>